<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view class="orderlist" v-else>
		<u-navbar leftIcon="arrow-left" title="派单列表" bgColor="#fff" leftIconColor="#000"
			:fixed="true" :titleStyle="titleStyle" @leftClick="$back"></u-navbar>

		<view class="top_nav display-flex">
			<view @click="tz(0)" :style="type==0?'color:#000;font-weight:700':'color:#999'">
				我发布的
				<view class="act" v-if="type==0">
				</view>
			</view>

			<view @click="tz(1)" :style="type==1?'color:#000;font-weight:700':'color:#999'">
				匹配完成
				<view class="act" v-if="type==1">
				</view>
			</view>

			<view @click="tz(2)" :style="type==2?'color:#000;font-weight:700':'color:#999'">
				匹配失败
				<view class="act" v-if="type==2">
				</view>
			</view>
		</view>
		<view class="empytView" v-if="list.length<=0 && loadEnd">
			<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
			<!-- <view>- 空列表 -</view> -->
		</view>

		<view class="cont" v-for="(item,index) in list" @click="$go('/task/list/order_dea?id='+item.id)" v-if="loadEnd">
			<view class="cont_s">
				<view class="con_top display-flex just-between">
					<view v-if="item.status==0">剩余时间：
						<wly-countdown :hour="getDateStr(item.sy_time,1)" :minute="getDateStr(item.sy_time,2)"
							:second="getDateStr(item.sy_time,3)" showType="slot">
							<template v-slot="{day, hour, minute, second}">
								<view v-if="day||hour||minute||second">

									<view class="time_model">
										<view>
											{{hour}}
										</view>
										<view>
											:
										</view>
									</view>
									<view class="time_model">
										<view>
											{{minute}}
										</view>
										<view>
											:
										</view>
									</view>
									<view class="time_model">
										<view>
											{{second}}
										</view>
									</view>
								</view>
							</template>
						</wly-countdown>
					</view>
					<view v-else>
						匹配单号：{{item.order_sn}}
					</view>
					<view v-if="item.status==0">
						{{item.apply_num}}位写手申请
					</view>
					<view v-else class="bnt_rigth" v-if="item.status==1">
						<text>匹配成功</text>
					</view>
					<view v-else class="bnt_rigth bnt_rigth_err" v-if="item.status==2">
						匹配失败
					</view>
					<view v-else class="bnt_rigth bnt_rigth_err_red" v-if="item.status==4">
						内容违规
					</view>
				</view>

				<view class="con_nav">
					<view class="navs">
						<view class="icon">订</view>
						<view class="navs_right">
							<view class="tp">
								字数共计{{item.tran_font_num}}{{item.tran_font_word}}，
								<!-- 订单价格每{{item.tran_font_word}}{{item.tarn_price}}元 -->
								<text v-if="item.task_type==0">
									订单价格每{{item.tran_font_word}}{{item.tarn_price}}币
								</text>
								<text>
									订单价格共计{{parseInt(item.money)}}币
								</text>
							</view>
							<view class="bom">截稿时间：{{item.end_time.substring(0,10)}}，类型：{{item.c_desc}}</view>
						</view>
					</view>
					<view class="navs">
						<view class="icon xie">写</view>
						<view class="navs_right">
							<view class="tp">写手等级为：【{{array_level_arr(item.level)}}】</view>
							<view class="bom">写手性别要求：{{item.sex==0?"不限":(item.sex==1?"男":"女")}}
								{{item.is_bao==0?"":'用户要求作品保密'}}
							</view>
						</view>
					</view>
					<view class="con_bomt">
						<span>制作要求：</span>
						{{item.c_content}}
					</view>
				</view>

				<view class="bomt" v-if="type==0">
					<view class="bomt_a_left">此订单全额稿费预计</view>
					<view class="bomt_a_right">
						
						{{item.money}}
					</view>
				</view>

				<view class="bomt_one" v-if="type==0">
					<view @tap.stop="items=item,current=1,showConfirm=true">取消订单</view>
					<view @tap.stop="items=item,current=0,showConfirm=true">重置时间</view>
				</view>

				<view v-else class="bomt">

				</view>

			</view>
		</view>

		<view class="zhanwei"></view>
		<view class="tarb_new">
			<view class="tar_home" @click="go_home()">
				<image :src="tar_index==0?'../static/image/tar_home1.png':'../static/image/tar_home.png'" mode="aspectFit">
				</image>
				<view>
					首页
				</view>
			</view>
			<view class="tar_order">
				<image :src="tar_index==0?'../static/image/tar_order.png':'../static/image/tar_order1.png'" mode="aspectFit">
				</image>
				<view>
					订单
				</view>
			</view>
		</view>
		
		
		<u-popup mode="center" :show="showConfirm">
			<view class="mask">
				<view class="matitle">
					<text>提示</text>
				</view>
				<view class="matxt">
					<block v-if="current== 1">{{'是否取消订单【' + items.c_title + '】'}} </block>
					<block v-else >{{'是否重置时间【' + items.c_title + '】'}}</block>
				</view>
				<view class="quque">
					<view class="quli" @click="showConfirm = false">
						取消
					</view>
					<view class="quli quactive" @click="sumit_qx(items,current)">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: '',
				showConfirm: false,
				tar_index: 1,
				type: 0,
				list: [],
				page: 1,
				titleStyle: {
					color: '#000'
				},
				loadEnd: false,
				totalPage: true,
				items: {}
			}
		},
		onReachBottom() {
			this.get_list();
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 800);
			this.page = 1;
			this.list = [];
			this.get_list()
		},
		onLoad() {

			this.get_list();
		},
		created() {
			let that = this;
		},
		onBackPress(options) {
			console.log('from:' + options.from)
		},
		methods: {
			$back(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			sumit_qx(item, type) {
				let str = "重置时间";
				if (type == 1) {
					str = "取消订单";
				}
				let _this = this;
				_this.$api.default.request('task/task_edit', {
					id: item.id,
					type: _this.current
				}).then((res) => {
					console.log(222, "的充值")
					_this.showConfirm = false
				
					_this.page = 1;
					_this.list = [];
					_this.get_list()
				
				})
			},

			getDateStr(mss, type) {
				var days = parseInt(mss / 86400);
				var hours = parseInt((mss - (days * 86400)) / 3600);
				var minutes = parseInt((mss - (days * 86400) - (hours * 3600)) / 60);
				var seconds = mss - (days * 86400) - (hours * 3600) - (minutes * 60)

				if (type == 0) {
					return days;
				}
				if (type == 1) {
					return hours;
				}
				if (type == 2) {
					return minutes;
				}
				if (type == 3) {
					return seconds;
				}

			},
			array_level_arr(index) {

				var array_level = ['不限', '1-10', '11-20', '21-30', '21-30', '31-40', '41-50'];
				return array_level[index];
			},
			get_list() {
				var _this = this;
				this.$api.default.request('task/orderList', {
					page: this.page,
					type: this.type
				},'POST',false).then((res) => {
					if (res.code) {

						if (res.data.data) {
							if (_this.list != null) {
								// this.articleList.concat(res.data.data);
								_this.list = _this.list.concat(res.data.data);
								// res.data.data.forEach((item) => {
								// 	this.logList.push(item)
								// })
							} else {
								_this.list = res.data.data;
							}
							_this.page++; // 页数加一，加载下一页数据
						}
						
						_this.loadEnd = true
					}
					
					_this.totalPage = false
				})
			},
			go_home() {
				uni.navigateBack({ //返回上一个页面
					delta: 1
				});
			},
			tz(type) {
				this.page = 1;
				this.list = [];
				this.type = type
				this.get_list();
			},
			goToxie() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + this.$config.default.Url + '/agreement/1000009'
				})
			},
			hidePay(e) {
				console.log(e)
			},
			goPay() {

				this.$api.default.request('order/createvip', prams).then((res) => {
					if (res.code) {
						this.$common.wxPay(res.data, () => {

							that.$common.errorToShow('支付成功');
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/user/orderdetail?id=' + this.orderInfo.id
								})
							}, 800);
						})
					}
				})

			},
			isReadTip() {
				if (!this.isRead) {
					this.$common.errorToShow('请先同意用户协议');
					this.isRead = 1
					setTimeout(() => {
						this.isRead = 0;
					}, 300)
					return
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f5f2;
	}

	.orderlist {
		padding-top: calc(var(--status-bar-height) +  64px);
		
		.empytView {
			padding-top: 200rpx;
		}

		.zhanwei {
			width: 100%;
			height: 200rpx;
			float: left;
		}

		width: 92%;
		margin-left: 4%;

		.top_nav {
			/* #ifdef APP-PLUS */
			margin-top: 0rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			margin-top: 20rpx;
			/* #endif */
			font-size: 28rpx;
			width: 100%;

			view {
				position: relative;
				margin-left: 30rpx;

				&:first-child {
					margin-left: 0px
				}
			}

			;
		}

		.act {
			height: 8rpx;
			background: #45C4B0;
			width: 80rpx;
			position: absolute;
			bottom: 4px;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 0.5em;
			z-index: -1;
		}

		.act1 {
			height: 8rpx;
			background: #45C4B0;
			width: 80rpx;
			position: absolute;
			top: 52rpx;
			left: 188rpx;
			border-radius: 0.5em;
		}

		.act2 {
			height: 4px;
			background: #45C4B0;
			width: 40px;
			position: absolute;
			top: 26px;
			left: 330rpx;
			border-radius: 0.5em;
		}

		.cont {
			width: 100%;
			border-radius: 0.5em;
			background: #fff;
			margin-top: 13px;
			color: #3d3d3d;
			font-weight: 640;
			float: left;

			.cont_s {
				width: 90%;
				margin-left: 5%;

				.con_top {
					padding-top: 12px;
					width: 100%;
					font-size: 13px;
					float: left;
					padding-bottom: 10px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);

					view {
						float: left;

						&:last-child {
							float: right;
							color: #45C4B0;
							font-size: 13px;
							font-weight: 500;
						}
					}

					.bnt_rigth {
						width: 60px;
						height: 17px;
						border-radius: 4px;
						/* 自动布局 */
						padding: 5px 5px;
						background: rgba(69, 196, 176, 0.15);
						text-align: center;
					}

					.bnt_rigth_err {
						color: #999999 !important;
						background: rgba(216, 216, 216, 0.3);

					}
					.bnt_rigth_err_red {
						color: #ED3232 !important;
						background: rgba(237, 50, 50, 0.15);;
					}
				}
			}

			.con_nav {
				margin-top: 10px;
				width: 100%;
				float: left;

				.navs {
					.icon {
						width: 14px;
						height: 14px;
						border-radius: 6px;
						padding: 2px 3px;
						background: #45C4B0;
						float: left;
						font-size: 9px;
						line-height: 14px;
						color: #fff;
						text-align: center;
						position: relative;
						top: 2px;
						margin-right: 5px;
					}

					.xie {
						background: #7AAAF2 !important;
					}

					.navs_right {
						.tp {
							font-size: 15px;
							width: 90%;
							overflow: hidden; //隐藏
							white-space: nowrap; //不换行
							text-overflow: ellipsis; //超出部分省略号
						}

						.bom {
							margin-left: 25px;
							width: 90%;
							color: #999;
							font-size: 12px;
							font-weight: 400;
							margin-top: 5px;
							margin-bottom: 10px;
						}
					}
				}

				.con_bomt {
					font-weight: 400;
					width: 86%;
					padding-left: 7%;
					padding-right: 7%;
					padding-bottom: 15rpx;
					background: rgba(216, 216, 216, 0.3);
					color: #999;
					font-size: 10px;
					border-radius: 0.5em;
					padding-top: 5px;

					span {
						color: #45C4B0;
					}

					overflow-wrap:break-word
				}
			}

			.bomt {
				margin-top: 12px;
				padding-bottom: 8px;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				;
				float: left;
				width: 100%;
				font-size: 15px;

				.bomt_a_left {
					float: left;
				}


				.bomt_a_right {
					float: right;
					color: #45C4B0;
					overflow: hidden; //隐藏
					text-overflow: ellipsis; //超出部分省略号
					font-size: 16px;

					span {
						font-size: 12px;
						overflow: hidden; //隐藏
						text-overflow: ellipsis; //超出部分省略号
					}

					;
				}
			}

			.bomt_one {
				width: 100%;
				float: left;
				margin-top: 20rpx;
				height: 100rpx;

				view {
					width: 290rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 0.2em;
					font-size: 26rpx;
					text-align: center;

					&:first-child {
						float: left;
						// margin-left: 10px;
						background: rgba(216, 216, 216, 0.3);
						color: #999;
					}

					&:last-child {
						float: right;
						// margin-right: 10px;
						background: #45C4B0;
						color: #fff;
					}
				}
			}
		}

		.tarb_new {
			position: fixed;
			bottom: 0px;
			background: #fff;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
			left: 0px;
			height: 50px;
			width: 100%;
			padding-top: 10px;

			view {

				width: 50%;
				margin: 0 auto;
				float: left;
				text-align: center;

				image {

					margin: 0 auto;
					height: 20px;
					width: 28px;
				}

				view {
					font-size: 12px;
					width: 100%;
					text-align: center;
					float: left;
					color: #999999;
				}

			}

			;
		}
	}
	
	.mask {
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding-top: 48rpx;
	
		.matitle {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #3D3D3D;
			padding-bottom: 6rpx;
			line-height: 46rpx;
		}
	
		.matxt {
			font-size: 24rpx;
			font-weight: normal;
			text-align: center;
			letter-spacing: 0em;
			color: #999999;
			line-height: 34rpx;
			padding-bottom: 50rpx;
		}
	
		.quque {
			display: flex;
			align-items: center;
			border-top: 1px solid rgba(153, 153, 153, 0.1);
	
			.quli {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
	
			.quactive {
				background: rgba(69, 196, 176, 0.05);
			}
		}
	}
</style>